<template>
  <div class="question">
    <!--    头像-->
    <van-image
        width="40"
        height="40"
        lazy-load
        round
        src="https://p.qqan.com/up/2021-6/16243310849654997.jpg"
    >
      <template v-slot:loading>
        <van-loading type="spinner" size="20" />
      </template>
    </van-image>
    <!--    回答-->
    <div class="myState">
      <p v-if="loadingFlag"><van-loading size="18px" color="red"/></p>
      <p v-text="answer"></p>
    </div>
  </div>
</template>

<script>
export default {
  name: "YourA",
  props:{
    answer:[String,Number],
    loadingFlag:Boolean
  }
}
</script>

<style scoped lang="less">
.question{
  width: 80%;
  float: left;
  margin: 10px 20px;
  >div{
    float: left;
  }
  >.myState{
    margin: 10px;
    border-radius: 10px;
    background-color: white;
    padding: 10px 15px;
    color: black;
    max-width: 60%;
    word-break: break-all;
    >p{
      width: 100%;
    }
  }
}
</style>